interface Component {
  name: string;
  image: string;
  imageDark: string;
  link: string;
  classes: string;
}

export const COMPONENTS_DATA: Component[] = [
  {
    name: "Alerts",
    image: "/images/components/alerts.svg",
    imageDark: "/images/components/alerts-dark.svg",
    link: "/docs/components/alert",
    classes: "w-56",
  },
  {
    name: "Accordion",
    image: "/images/components/accordion.svg",
    imageDark: "/images/components/accordion-dark.svg",
    link: "/docs/components/accordion",
    classes: "w-56",
  },
  {
    name: "Avatar",
    image: "/images/components/avatar.svg",
    imageDark: "/images/components/avatar-dark.svg",
    link: "/docs/components/avatar",
    classes: "w-40",
  },
  {
    name: "Badges",
    image: "/images/components/badges.svg",
    imageDark: "/images/components/badges-dark.svg",
    link: "/docs/components/badge",
    classes: "w-28",
  },
  {
    name: "Breadcrumbs",
    image: "/images/components/breadcrumbs.svg",
    imageDark: "/images/components/breadcrumbs-dark.svg",
    link: "/docs/components/breadcrumb",
    classes: "w-64",
  },
  {
    name: "Buttons",
    image: "/images/components/buttons.svg",
    imageDark: "/images/components/buttons-dark.svg",
    link: "/docs/components/button",
    classes: "w-24",
  },
  {
    name: "Button group",
    image: "/images/components/button-group.svg",
    imageDark: "/images/components/button-group-dark.svg",
    link: "/docs/components/button-group",
    classes: "w-56",
  },
  {
    name: "Cards",
    image: "/images/components/cards.svg",
    imageDark: "/images/components/cards-dark.svg",
    link: "/docs/components/card",
    classes: "w-36",
  },
  {
    name: "Carousel",
    image: "/images/components/carousel.svg",
    imageDark: "/images/components/carousel-dark.svg",
    link: "/docs/components/carousel",
    classes: "w-48",
  },
  {
    name: "Datepicker",
    image: "/images/components/datepicker.svg",
    imageDark: "/images/components/datepicker-dark.svg",
    link: "/docs/components/datepicker",
    classes: "w-28",
  },
  {
    name: "Dropdown",
    image: "/images/components/dropdown.svg",
    imageDark: "/images/components/dropdown-dark.svg",
    link: "/docs/components/dropdown",
    classes: "w-28",
  },
  {
    name: "Forms",
    image: "/images/components/forms.svg",
    imageDark: "/images/components/forms-dark.svg",
    link: "/docs/components/forms",
    classes: "w-40",
  },
  {
    name: "List group",
    image: "/images/components/list-group.svg",
    imageDark: "/images/components/list-group-dark.svg",
    link: "/docs/components/list-group",
    classes: "w-36",
  },
  // {
  //   name: "Typography",
  //   image: "/images/components/typography.svg",
  //   imageDark: "/images/components/typography-dark.svg",
  //   link: "/docs/components/typography",
  //   classes: "w-36"
  // },
  {
    name: "Modal",
    image: "/images/components/modal.svg",
    imageDark: "/images/components/modal-dark.svg",
    link: "/docs/components/modal",
    classes: "w-48",
  },
  {
    name: "Tabs",
    image: "/images/components/tabs.svg",
    imageDark: "/images/components/tabs-dark.svg",
    link: "/docs/components/tabs",
    classes: "w-64",
  },
  {
    name: "Navbar",
    image: "/images/components/navbar.svg",
    imageDark: "/images/components/navbar-dark.svg",
    link: "/docs/components/navbar",
    classes: "w-56",
  },
  {
    name: "Footer",
    image: "/images/components/footer.svg",
    imageDark: "/images/components/footer-dark.svg",
    link: "/docs/components/footer",
    classes: "w-56",
  },
  {
    name: "Sidebar",
    image: "/images/components/sidebar.svg",
    imageDark: "/images/components/sidebar-dark.svg",
    link: "/docs/components/sidebar",
    classes: "w-16",
  },
  {
    name: "Pagination",
    image: "/images/components/pagination.svg",
    imageDark: "/images/components/pagination-dark.svg",
    link: "/docs/components/pagination",
    classes: "w-48",
  },
  // {
  //   name: "Speed Dial",
  //   image: "/images/components/dial.svg",
  //   imageDark: "/images/components/dial-dark.svg",
  //   link: "/docs/components/speed-dial",
  //   classes: "w-72"
  // },
  {
    name: "Rating",
    image: "/images/components/rating.svg",
    imageDark: "/images/components/rating-dark.svg",
    link: "/docs/components/rating",
    classes: "w-48",
  },
  {
    name: "Timeline",
    image: "/images/components/timeline.svg",
    imageDark: "/images/components/timeline-dark.svg",
    link: "/docs/components/timeline",
    classes: "w-24",
  },
  {
    name: "Progress bar",
    image: "/images/components/progress.svg",
    imageDark: "/images/components/progress-dark.svg",
    link: "/docs/components/progress",
    classes: "w-48",
  },
  {
    name: "Table",
    image: "/images/components/table.svg",
    imageDark: "/images/components/table-dark.svg",
    link: "/docs/components/table",
    classes: "w-48",
  },
  {
    name: "Spinner",
    image: "/images/components/spinner.svg",
    imageDark: "/images/components/spinner-dark.svg",
    link: "/docs/components/spinner",
    classes: "w-32",
  },
  {
    name: "Toast",
    image: "/images/components/toast.svg",
    imageDark: "/images/components/toast-dark.svg",
    link: "/docs/components/toast",
    classes: "w-48",
  },
  {
    name: "Tooltips",
    image: "/images/components/tooltips.svg",
    imageDark: "/images/components/tooltips-dark.svg",
    link: "/docs/components/tooltip",
    classes: "w-24",
  },
  // {
  //   name: "Input Field",
  //   image: "/images/components/input-field.svg",
  //   imageDark: "/images/components/input-field-dark.svg",
  //   link: "/docs/forms/input-field",
  //   classes: "w-40"
  // },
  {
    name: "File Input",
    image: "/images/components/file-input.svg",
    imageDark: "/images/components/file-input-dark.svg",
    link: "/docs/forms/file-input",
    classes: "w-48",
  },
  // {
  //   name: "Search Input",
  //   image: "/images/components/search-input.svg",
  //   imageDark: "/images/components/search-input-dark.svg",
  //   link: "/docs/forms/search-input",
  //   classes: "w-56"
  // },
  // {
  //   name: "Select",
  //   image: "/images/components/select.svg",
  //   imageDark: "/images/components/select-dark.svg",
  //   link: "/docs/forms/select",
  //   classes: "w-56"
  // },
  // {
  //   name: "Textarea",
  //   image: "/images/components/textarea.svg",
  //   imageDark: "/images/components/textarea-dark.svg",
  //   link: "/docs/forms/textarea",
  //   classes: "w-56"
  // },
  // {
  //   name: "Checkbox",
  //   image: "/images/components/checkbox.svg",
  //   imageDark: "/images/components/checkbox.svg",
  //   link: "/docs/forms/checkbox",
  //   classes: "w-40"
  // },
  // {
  //   name: "Radio",
  //   image: "/images/components/radio.svg",
  //   imageDark: "/images/components/radio-dark.svg",
  //   link: "/docs/forms/radio",
  //   classes: "w-36"
  // },
  // {
  //   name: "Toggle",
  //   image: "/images/components/toggle.svg",
  //   imageDark: "/images/components/toggle-dark.svg",
  //   link: "/docs/forms/toggle",
  //   classes: "w-40"
  // },
  // {
  //   name: "Range Slider",
  //   image: "/images/components/range-slider.svg",
  //   imageDark: "/images/components/range-slider-dark.svg",
  //   link: "/docs/forms/range",
  //   classes: "w-56"
  // },
  {
    name: "Floating Label",
    image: "/images/components/floating-label.svg",
    imageDark: "/images/components/floating-label-dark.svg",
    link: "/docs/forms/floating-label",
    classes: "w-40",
  },
  // {
  //   name: "Mega menu",
  //   image: "/images/components/mega-menu.svg",
  //   imageDark: "/images/components/mega-menu-dark.svg",
  //   link: "/docs/components/mega-menu",
  //   classes: "w-40"
  // },
  // {
  //   name: "Skeleton",
  //   image: "/images/components/skeleton.svg",
  //   imageDark: "/images/components/skeleton-dark.svg",
  //   link: "/docs/components/skeleton",
  //   classes: "w-40"
  // },
  {
    name: "KBD (Keyboard)",
    image: "/images/components/keyboard.svg",
    imageDark: "/images/components/keyboard-dark.svg",
    link: "/docs/components/kbd",
    classes: "w-40",
  },
  // {
  //   name: "Drawer (offcanvas)",
  //   image: "/images/components/drawer.svg",
  //   imageDark: "/images/components/drawer-dark.svg",
  //   link: "/docs/components/drawer",
  //   classes: "w-56"
  // },
  // {
  //   name: "Popover",
  //   image: "/images/components/popover.svg",
  //   imageDark: "/images/components/popover-dark.svg",
  //   link: "/docs/components/popover",
  //   classes: "w-56"
  // },
  // {
  //   name: "Video",
  //   image: "/images/components/video.svg",
  //   imageDark: "/images/components/video-dark.svg",
  //   link: "/docs/components/video",
  //   classes: "w-64"
  // },
  // {
  //   name: "Heading",
  //   image: "/images/components/heading.svg",
  //   imageDark: "/images/components/heading-dark.svg",
  //   link: "/docs/typography/headings",
  //   classes: "w-72"
  // },
  // {
  //   name: "Paragraph",
  //   image: "/images/components/paragraph.svg",
  //   imageDark: "/images/components/paragraph-dark.svg",
  //   link: "/docs/typography/paragraphs",
  //   classes: "w-64"
  // },
  {
    name: "Blockquote",
    image: "/images/components/blockquote.svg",
    imageDark: "/images/components/blockquote-dark.svg",
    link: "/docs/typography/blockquote",
    classes: "w-64",
  },
  // {
  //   name: "Image",
  //   image: "/images/components/image.svg",
  //   imageDark: "/images/components/image-dark.svg",
  //   link: "/docs/typography/images",
  //   classes: "w-64"
  // },
  {
    name: "List",
    image: "/images/components/list.svg",
    imageDark: "/images/components/list-dark.svg",
    link: "/docs/typography/list",
    classes: "w-64",
  },
  // {
  //   name: "Link",
  //   image: "/images/components/link.svg",
  //   imageDark: "/images/components/link-dark.svg",
  //   link: "/docs/typography/links",
  //   classes: "w-64"
  // },
  // {
  //   name: "Text",
  //   image: "/images/components/text.svg",
  //   imageDark: "/images/components/text-dark.svg",
  //   link: "/docs/typography/text",
  //   classes: "w-64"
  // },
  // {
  //   name: "Horizontal line (HR)",
  //   image: "/images/components/hr.svg",
  //   imageDark: "/images/components/hr-dark.svg",
  //   link: "/docs/typography/hr",
  //   classes: "w-64"
  // },
  // {
  //   name: "Stepper",
  //   image: "/images/components/stepper.svg",
  //   imageDark: "/images/components/stepper-dark.svg",
  //   link: "/docs/components/stepper",
  //   classes: "w-64"
  // },
  // {
  //   name: "Indicators",
  //   image: "/images/components/indicators.svg",
  //   imageDark: "/images/components/indicators-dark.svg",
  //   link: "/docs/components/indicators",
  //   classes: "w-64"
  // },
  // {
  //   name: "Bottom Navigation",
  //   image: "/images/components/bottom-bar.svg",
  //   imageDark: "/images/components/bottom-bar-dark.svg",
  //   link: "/docs/components/bottom-navigation",
  //   classes: "w-64"
  // },
  {
    name: "Sticky Banner",
    image: "/images/components/banner.svg",
    imageDark: "/images/components/banner-dark.svg",
    link: "/docs/components/banner",
    classes: "w-64",
  },
  // {
  //   name: "Gallery (Masonry)",
  //   image: "/images/components/gallery.svg",
  //   imageDark: "/images/components/gallery-dark.svg",
  //   link: "/docs/components/gallery",
  //   classes: "w-64"
  // },
  // {
  //   name: "Jumbotron",
  //   image: "/images/components/jumbotron.svg",
  //   imageDark: "/images/components/jumbotron-dark.svg",
  //   link: "/docs/components/jumbotron",
  //   classes: "w-64"
  // }
];
